<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <style>
        .content {
            height: 100%;
        }
        .item {
            float: left;
            width: 50%;
            height: 720px;
            /*border: 1px solid red;*/
            flex-grow: 1;
            box-sizing: border-box;
            padding: 5px;
        }
        .header {
            height: 32px;
        }
        .canvasBody {
            height:  calc(100% - 32px);
            box-sizing: border-box;
            border: 1px dashed #414141;
        }
        @media (max-width: 720px) {
            .item {
                width: 100%;
            }
        }
    </style>
</head>

<body style="height: 100%; margin: 0">
    <div class="content">
        {{# let len = d.tableObjArr.length }}
        {{# for (let i = 1; i<= len ;i++) { }}
        <div class="item">
            <div class="header">
                <h3>{{d.tableObjArr[i-1].title}}</h3>
            </div>
           <div class="canvasBody" id="container{{i}}"></div>
        </div>
        {{# } }}

    </div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GqVMFAj97CFNzEy1lLR1gvl4vNnKNjzE&__ec_v__=17013997"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script type="text/javascript">
        let app = {};
        {{# for (let i=1; i<=len; i++) { }}
        let dom{{i}} = document.getElementById("container{{i}}");
        let myChart{{i}} = echarts.init(dom{{i}});
        option{{i}} = null;
        option{{i}} = {
            series: [{
                type: 'treemap',
                data: {{JSON.stringify(d.tableObjArr[i-1].data)}}
            }]
        };

        if (option{{i}} && typeof option{{i}} === "object") {
            myChart{{i}}.setOption(option{{i}}, true);
        }
      {{# } }}
        let isResized = true;
        window.onresize = function(){
            if (!isResized) return
            isResized = false
            setTimeout(() => {
                // 在此重置
            {{# for (let i=1; i<=len; i++) { }}
                myChart{{i}}.resize();
            {{# } }}
                isResized = true;
                console.log('完成')
            }, 200);
        }
    </script>
</body>

</html>
